<template>
    <div>
        <el-form v-if="displayType=='add'" :model="newJob" :rules="rules" class="infoInput" label-width="110px" ref="addForm">
            <el-form-item label="任务名称" prop="jobName">
                <el-input v-model="newJob.jobName" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="bean名称" prop="beanName">
                <el-input v-model="newJob.beanName" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="参数" prop="params">
                <el-input v-model="newJob.params" size="medium"></el-input>
            </el-form-item>
            <el-form-item prop="cron">
                <span slot="label">
                    <span class="span-box">
                        <el-tooltip style="diaplay:inline" effect="dark" :content="cronCn" placement="top">
                            <i class="el-icon-question" />
                        </el-tooltip>
                        <span>定时策略</span>
                    </span>
                </span>
                <el-col>
                    <el-input v-model="cron" placeholder="请输入定时策略" size="medium" style="width:90%;">
                        <el-button type="primary" slot="append" @click="cronPopover=true" size="medium" style="width:90%;">
                            生成表达式
                            <i class="el-icon-time el-icon--right"></i>
                        </el-button>
                    </el-input>
                </el-col>
                <el-popover v-model="cronPopover">
                    <cron @change="changeCron" @close="cronPopover=false" i18n="cn"></cron>
                </el-popover>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="newJob.status">
                    <el-radio
                        v-for="item in statusDictArr"
                        :key="item.id" 
                        :label="item.dictLabel" :value="item.dictValue">
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" style="width:90%" v-model="newJob.remark"></el-input>
            </el-form-item>
            <div class="inlineBtn">
                <el-button type="primary" size="medium" @click="addSubmit">提交</el-button>
                <el-button size="medium"  @click="noUpdate">取消</el-button>
            </div>
        </el-form>
        <el-form v-if="displayType=='edit'" :model="jobInfo" :rules="rules" class="infoInput" label-width="110px" ref="editForm">
            <el-form-item label="任务名称" prop="jobName">
                <el-input v-model="jobInfo.jobName" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="bean名称" prop="beanName">
                <el-input v-model="jobInfo.beanName" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="参数" prop="params">
                <el-input v-model="jobInfo.params" size="medium"></el-input>
            </el-form-item>
            <el-form-item prop="cron">
                <span slot="label">
                    <span class="span-box">
                        <el-tooltip style="diaplay:inline" effect="dark" :content="cronCn" placement="top">
                            <i class="el-icon-question" />
                        </el-tooltip>
                        <span>定时策略</span>
                    </span>
                </span>
                <el-col><!--奶奶的，这里纯抽风，按官网的写法不能实现输入框包裹按钮，但是再在随便在外层加个标签就行了，可能是在form里？-->
                    <el-input v-model="cron" placeholder="请输入定时策略" size="medium" style="width:90%;">
                        <el-button type="primary" slot="append" @click="cronPopover=true" size="medium" style="width:90%;">
                            生成表达式
                            <i class="el-icon-time el-icon--right"></i>
                        </el-button>
                    </el-input>
                </el-col>
                <el-popover v-model="cronPopover">
                    <cron @change="changeCron" @close="cronPopover=false" i18n="cn"></cron>
                </el-popover>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="jobInfo.status">
                    <el-radio
                        v-for="item in statusDictArr"
                        :key="item.id" 
                        :label="item.dictLabel" :value="item.dictValue">
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" style="width:90%" v-model="jobInfo.remark"></el-input>
            </el-form-item>
            <div class="inlineBtn">
                <el-button type="primary" size="medium" @click="updateSubmit">提交</el-button>
                <el-button size="medium"  @click="noUpdate">取消</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
  import {cron} from 'vue-cron'
  import cronstrue from "../../../node_modules/cronstrue/i18n"; 
  export default {
    data() {
        return {
            newJob: {
                status:'启用',
            },
            //表单校验规则
            rules:{
                jobName: [
                    { required: true, message: '请输入任务名称', trigger: 'blur' },
                ],
                beanName: [
                    { required: true, message: '请输入bean名称', trigger: 'blur' }
                ],
                remark:[
                    { required: true, message: '请输入备注', trigger: 'blur' },
                    { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' },
                ],
            },
            jobInfo:JSON.parse(this.job),
            cronPopover:false,//定时任务表达式配置框
            cron:'',//cron表达式
            statusDictArr:[]//状态字典
        }
    },
    computed:{
        //cron表达式的释义
        cronCn(){
            if(this.sa.isNotNull(this.cron)){
                return cronstrue.toString(this.cron,{ locale: "zh_CN",dayOfWeekStartIndexZero:false })
            }else{
                return "这是一段cron表达式的释义"
            }
        }
    },
    components: { cron },
    props:['job','displayType'],
    methods: {
        //新增提交
        addSubmit() {
            if(!this.checkForm('addForm')){
                return
            }
            console.log(this.newJob);
            let params=this.newJob;
            params.cron=this.cron;
            params=this.sa.displaceIntStatus(params)
            this.request('/api/schedule/add',params).then(res=>{
              if(!res){return}
              this.$bus.$emit("addJobCallback")
            })
        },
        //修改提交
        updateSubmit(){
            if(!this.checkForm('editForm')){
                return
            }
            console.log(this.jobInfo);
            let params=this.jobInfo;
            params.cron=this.cron;
            params=this.sa.displaceIntStatus(params)
            this.request('/api/schedule/update',params).then(res=>{
              if(!res){return}
              this.$bus.$emit("updateJobCallback")
            })
        },
        //修改cron
        changeCron(val){
            this.cron=val
        },
        //表单提交前置校验
        checkForm(formName){
            let flag;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    flag=true;
                    return true;
                } else {
                    flag=false
                    return false;
                }
            });
            return flag
        },
        //取消修改
        noUpdate(){
            this.$bus.$emit("noUpdate")
        }
    },
    mounted(){
        if(this.displayType=="edit"){
            this.jobInfo=this.sa.displaceStrStatus(this.jobInfo)
            this.cron=this.jobInfo.cron
        }
        this.statusDictArr=this.sa.getDictByid("1")
    }
  }
</script>

<style>
/*表单input框样式控制 */
.infoInput >div>div>div>input{
  width:90%;
}
/*修改页按钮 */
.inlineBtn {
    text-align:center
}
</style>